<script setup>
import { ref, reactive } from 'vue';
import { uploadImage } from '@/utils/api.js'
import { useRoute, useRouter } from 'vue-router'; //路由器
import { onMounted } from 'vue';
import http from '@/utils/request.js';
const route = useRoute();   //获取路由对象
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
const align = ref('center');
const uploaderRef = ref(null);
const avatorUrl = ref("");
const toSelectImage = function () {
  uploaderRef.value.chooseFile();
}
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
  uploadImage(file)
    .then((url) => {
      console.log("上传成功,返回url = ", url)
      avatorUrl.value = url;
    })
    .catch((err) => {
      console.log("失败消息：", err)
    });
};
let userInfo = reactive({
  //用户名
  userName: '',
  //用户id
  id: '',
});

const history = reactive({ number: '', });
//查询历史浏览记录
const getHistoryLists = function (id) {
  http.get('/user/history/' + id).then((res) => {
    console.log('获取到的历史浏览记录：', res.data);
    history.number = res.data.data.length;
  })
}
onMounted(() => {
  
  // 获取个人信息  
  http.get("/user/info").then((response) => {
    console.log("获取个人信息= ", response);
    userInfo.userName = response.data.data.userName;
    userInfo.id = response.data.data.id;
    getHistoryLists(userInfo.id);
    console.log("========用户id:",userInfo.id);
  });
})
//关注
const attention = 100;
//粉丝
const fans = 100;
//我的发布
const publish = 100;
//我卖出的
const sell = 100;
//我买到的
const buy = 100;
//跳转到登录页面
function toMyCommentView() {
  router.push("/mycomment");
}
//跳转到待支付页面
function toBeforePayView() {
  router.push("/beforepay");
}
//跳转到待收货页面
function toAfterSendView() {
  router.push("/aftersend");
}
//跳转到待发货页面
function toBackOrderView() {
  router.push("/backorder");
}
//跳转被退货页面
function toBuyView() {
  // path: '/ackreturn',
  router.push("/ackreturn");
}
//跳转到我卖出的页面
function toSelldView() {
  router.push("/selled");
}
//跳转到我发布的页面
function toMytradeView() {
  router.push("/mytrade");
}
//跳转到设置
function toSettingView() {
  router.push("/setting");
}
//跳转到收货地址
function toAddressView() {
  router.push("/address");
}
//跳转到收藏toFansView
function toCollectView() {
  router.push("/collect");
}
//跳转到浏览历史页面
const toHistoryView = function (userId) {
  router.push({ path: "/history/" + userId });

}
//跳转到关注
function toAttentionView() {
  router.push("/attention");
}
//跳转到粉丝toFansView
function toFansView() {
  router.push("/fans");
}
</script>
<template>
  <van-col>
    <van-row>
      <van-col>
        <van-image round width="8rem" height="8rem" :src="avatorUrl" @click="toSelectImage" />
        <van-uploader :after-read="afterRead" style="display: none;" ref="uploaderRef" />
      </van-col>
      <van-col style="margin: auto;">
        <van-cell-group :border="false">
          <van-cell>
            <template #title>
              <span class="custom-title">用户名:</span>
              <span>{{ userInfo.userName }}</span>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <span class="custom-title">ID:</span>
              <span>{{ userInfo.id }}</span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-col>
      <van-col>
        <van-icon name="setting-o" @click="toSettingView" />
      </van-col>
    </van-row>
    <van-row class="head_form">
      <van-col offset="2" span="5" @click="toHistoryView(userInfo.id)">
        <van-row>{{ history.number }}</van-row>
        <van-row><a>浏览历史</a></van-row>
      </van-col>
      <van-col offset="4" span="4"  @click="toAttentionView">
        <van-row>{{ attention }}</van-row>
        <van-row><a>关注</a></van-row>
      </van-col>
      <van-col offset="4" span="4"  @click="toFansView">

        <van-row>{{ fans }}</van-row>
        <van-row><a>粉丝</a></van-row>
      </van-col>
    </van-row>
    <van-col class="commodity">
      <van-col offset="1">
        <van-space :align="align">
          <p>我的订单</p>
          <van-icon name="records-o" />
        </van-space>
      </van-col>
      <van-grid :border="false">
        <van-grid-item icon="peer-pay" text="待付款" @click="toBeforePayView" />
        <van-grid-item icon="logistics" text="待发货" @click="toBackOrderView" />
        <van-grid-item icon="logistics" text="待收货" @click="toAfterSendView" />
        <van-grid-item icon="comment-o" text="评论" @click="toMyCommentView" />
      </van-grid>
    </van-col>
    <van-col class="commodity">
      <van-col offset="1">
        <van-space :align="align">
          <p>我的交易</p>
          <van-icon name="balance-o" />
        </van-space>
      </van-col>
      <van-grid :border="false" :column-num="3">
        <van-grid-item @click="toMytradeView">
          <van-icon name="bag-o" />
          <a>我的发布</a>{{ publish }}
        </van-grid-item>
        <van-grid-item @click="toSelldView">
          <van-icon name="cash-on-deliver" />
          <a>我卖出的</a>{{ sell }}
        </van-grid-item>
        <van-grid-item @click="toBuyView">
          <van-icon name="orders-o" />
          <a>售后处理</a>{{ buy }}
        </van-grid-item>
      </van-grid>
    </van-col>
    <van-grid :border="false" class="commodity">
      <van-grid-item icon="like-o" text="收藏" @click="toCollectView" />
      <van-grid-item icon="location-o" text="收货地址" @click="toAddressView" />
      <van-grid-item icon="service-o" text="联系客服" to="client" />
      <van-grid-item icon="setting-o" text="设置" @click="toSettingView" />
    </van-grid>
  </van-col>
</template>
<style>
.head_form {
  position: relative;
  top: 15px;
}

.commodity {
  background-color: ghostwhite;
  margin: 10px -10px;
  position: relative;
  top: 20px;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

:root:root {
  --van-grid-item-content-background: ghostwhite;
}
</style>